<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="UTF-8">
		<title>红酒会 - 智能红酒管家</title>
		<link rel="shortcut icon" type="image/x-icon" href="${ctx}/favicon.ico" />
		<link href="http://libs.baidu.com/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet">
		<link rel="stylesheet" href="${ctx}/static/styles/admin.css" />
	</head>
<body>
	<c:import url="admin_header.jsp" />

	<div class="container-fluid" style="padding-top:40px;">
		<div class="row-fluid">
			<div class="span2">
				<c:import url="admin_menu.jsp">
					<c:param name="menu">article</c:param>
				</c:import>
        	</div><!--/span-->
			<div class="span10">
				<div>
					<ul class="breadcrumb">
	  					<li><a href="${ctx}/admin/article/list">文章管理</a> <span class="divider">/</span></li>
	  					<li class="active">新建文章</li>
					</ul>
				</div>
				<div>
					<form id="form" class="form-horizontal" action="${ctx}/admin/article/create" method="post">
						<div class="control-group">
							<label class="control-label" for="title">
								<span style="color:red;"><strong>*</strong></span>
								文章标题</label>
							<div class="controls">
								<input type="text" id="title" name="title" class="input-xlarge">
								<span id="error_title"></span>
							</div>
						</div>
						<div class="control-group">
							<label class="control-label" for="content">
								<span style="color:red;"><strong>*</strong></span>
								文章内容</label>
							<div class="controls">
								<script type="text/plain" id="content" name="content" style="width:90%;"></script>
								<em id="error_content"></em>
							</div>
						</div>
						<div class="control-group">
							<label class="control-label" for="type">
								文章标签</label>
							<div class="controls">
								<c:set var="flag" value="0" />
								<c:forEach var="tag" items="${tagList}">
									<c:if test="${tag.type != flag}"><br/></c:if>
									<a href="javascript:void(0)" onclick="changeTags('${tag.id}')">
										<span class="label" id="tag${tag.id}" val="${tag.id}:${tag.name};">${tag.name}</span></a>
									<c:set var="flag" value="${tag.type}" />
								</c:forEach>
								<input type="hidden" id="tags" name="tags" />
							</div>
						</div>
						<div class="control-group">
							<label class="control-label" for="title">
								是否推荐</label>
							<div class="controls">
								<input type="checkbox" name="recommend">
							</div>
						</div>
						<div class="control-group">
					    	<div class="controls">
					    		<a href="${ctx}/admin/article/list" class="btn">&nbsp;&nbsp;&nbsp;返&nbsp;&nbsp;&nbsp;回&nbsp;&nbsp;&nbsp;</a>
					      		<button type="submit" class="btn btn-primary">&nbsp;&nbsp;&nbsp;提&nbsp;&nbsp;&nbsp;交&nbsp;&nbsp;&nbsp;</button>
					    	</div>
					  	</div>
					</form>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript" src="${ctx}/static/scripts/jquery.validate.min.js"></script>
	<script type="text/javascript" src="${ctx}/static/libs/ueditor/ueditor.config.js"></script>
	<script type="text/javascript" src="${ctx}/static/libs/ueditor/ueditor.all.js"></script>
	<script type="text/javascript">
		$(function() {
			UE.getEditor('content');
			$('#form').validate({
				rules: {
					title: {
						required: true,
						maxlength: 50
					}
				},
				messages: {
					title: {
						required: '请填写标题',
						maxlength: '标题不能超过50个字符'
					}
				},
				errorElement: 'em',
				errorPlacement: function(error, element) {
					error.appendTo($("#error_" + element.attr("id")));
				},
				submitHandler: function(form) {
					if(UE.getEditor('content').getContent().length < 300) {
						$('#error_content').attr('class', 'error').text('内容好像有点少，多写点吧');
					}else {
						var tags = '';
						$('span.label-important').each(function() {
							tags += $(this).attr('val');
						});
						$('#tags').val(tags);
						form.submit();
					}
				}
			});
		});
		function changeTags(tagId) {
			var tag = $('#tag' + tagId);
			if('label' == tag.attr('class')) {
				tag.attr('class', 'label label-important');
			}else {
				tag.attr('class', 'label');
			}
		}
	</script>
</body>
</html>